<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three&Go</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
            height: 100vh;
            vertical-align: middle;
        }

        .left-nav {
            width: 275px;
            background-color: rgba(154, 205, 50, 0.3);
        }

        .right-container {
            flex: 1;
            background-color: rgba(0, 0, 255, 0.2);
        }

    </style>
</head>
<body>
<div class="container">

    <div class="left-nav" id="dragNav"></div>
    <div class="right-container" id="dragContent"></div>
    <div id="container" style="display: none">
        <canvas id="canvas"></canvas>
    </div>
</div>
<script src="release/echarts.min.js"></script>
<script src="release/go.1.8.3.js"></script>
<script>
    function initThree() {
        var camera, scene, webglRender;
        var screen_width, screen_height, stats, container;
        var OrbitControls;

        var BoxGeometryMeshs = []//方块

        function initStata() {
            container = document.querySelector("#container")
            screen_width = window.innerWidth;
            screen_height = window.innerHeight;
//           stats = new Stats()
        }

        function initCamera() {
            //PerspectiveCamera( fov, aspect, near, far)
//        @paramer fov  相机视锥体垂直视角
//        @paramer aspect  相机视锥体宽高比
//        @paramer near   相机视锥体近裁剪面
//        @paramer far  相机视锥体远裁剪面。
//        camera = new THREE.PerspectiveCamera(60, screen_width / screen_height, 1, 10000)

//        OrthographicCamera(left, right, top, bottom, near, far )
//       @paramer   left — 相机视椎体（Camera frustum）左面。
//       @paramer   right — 相机视椎体（Camera frustum）右面。
//       @paramer   top — 相机视椎体（Camera frustum）上面。
//       @paramer   bottom — 相机视椎体（Camera frustum）下面。
//       @paramer  near — 相机视椎体（Camera frustum）前面（靠近相机的这一面）。
//       @paramer   far — 相机视椎体（Camera frustum）后面（远离相机的这一面）。
            camera = new THREE.OrthographicCamera(screen_width / -2, screen_width / 2, screen_height / 2, screen_height / -2, 1, 10000)
            camera.position.z = 5000//(蓝色)
            camera.position.x = 0//(红色)
            camera.position.y = 0//(绿色)
//        camera.up.x = 0
//        camera.up.y = 1
//        camera.up.z = 0

            //设置相机聚焦的位置(其实就是确定一个方向)
            camera.lookAt(new THREE.Vector3(0, 0, 0))
            console.log(camera.getWorldDirection())
        }

        function initScene() {
            scene = new THREE.Scene()
        }

        function addLight() {
            //环境光
            var AmbientLight = new THREE.AmbientLight()
            scene.add(AmbientLight)

            // 创建一个点光源
            var pointLight =
                new THREE.PointLight(0xFFFFFF);
// 设置点光源的位置
            pointLight.position.x = -100;
            pointLight.position.y = -100;
            pointLight.position.z = -100;
// 将点光源加入场景
            scene.add(pointLight);
        }

        function addObj() {

            //方块
            var BoxGeometry = new THREE.CubeGeometry(200, 200, 50);

            var geometry = new THREE.CylinderGeometry(100, 100, 100, 100);
            var material = new THREE.MeshBasicMaterial({color: 0xffff00});
            var cylinder = new THREE.Mesh(geometry, material);
//        cylinder.rotation.x = 75
            scene.add(cylinder);

            for (var i = 0; i < 4; i++) {
                switch (i) {
                    case 0:
                        var BoxGeometryMesh = new THREE.Mesh(BoxGeometry, new THREE.MeshNormalMaterial());
                        BoxGeometryMesh.position.x = 0;
                        BoxGeometryMesh.position.z = -200;
                        scene.add(BoxGeometryMesh);
                        BoxGeometryMeshs.push(BoxGeometryMesh)
                        break;
                    case 1:
                        var BoxGeometryMesh = new THREE.Mesh(BoxGeometry, new THREE.MeshNormalMaterial());
                        BoxGeometryMesh.position.x = 0;
                        BoxGeometryMesh.position.z = 200;
                        scene.add(BoxGeometryMesh);
                        BoxGeometryMeshs.push(BoxGeometryMesh)

                        break;
                    case 2:
                        var BoxGeometryMesh = new THREE.Mesh(BoxGeometry, new THREE.MeshNormalMaterial());
                        BoxGeometryMesh.position.x = 800;
                        BoxGeometryMesh.position.z = -200;
                        scene.add(BoxGeometryMesh);
                        BoxGeometryMeshs.push(BoxGeometryMesh)

                        break;
                    case 3:
                        var BoxGeometryMesh = new THREE.Mesh(BoxGeometry, new THREE.MeshNormalMaterial());
                        BoxGeometryMesh.position.x = 800;
                        BoxGeometryMesh.position.z = 200;
                        scene.add(BoxGeometryMesh);
                        BoxGeometryMeshs.push(BoxGeometryMesh)

                        break;
                }
            }


        }

//       function addText() {
//
//           var loader = new THREE.FontLoader();
//           loader.load('three/examples/fonts/optimer_bold.typeface.json',function (font) {
//               var TextGeometry = new THREE.TextGeometry("Hellow Word",{
//                   "font" : font,
//                   "size" : 70,
//                   "height" : 20,
//                   "bevelEnabled" : true,
//                   "bevelSize": 2
//               })
//               var material = new THREE.MeshBasicMaterial({color: 0xffff00});
//               var text = new THREE.Mesh(TextGeometry,material)
//               text.position.x = 500
//               scene.add(text)
//           })
//
//
//       }
        function initThree() {
            webglRender = new THREE.WebGLRenderer({
                canvas: document.querySelector("#canvas"),
                alpha: true //true 表示透明
            })
            webglRender.setSize(screen_width, screen_height)
//        webglRender.setClearColor(0xffffff)
        }

        function animate() {
            requestAnimationFrame(animate)
            for (var i = 0; i < BoxGeometryMeshs.length; i++) {
                BoxGeometryMeshs[i].rotation.z += 1
                BoxGeometryMeshs[i].position.x += 1
            }
            camera.position.x += 1;

//        BoxGeometryMesh.rotation.x += 0.1
//        camera.position.x +=1
//        camera.position.y +=1
//        camera.position.z +=1
//        var timer = Date.now() * 0.0001;
//        camera.position.x = Math.cos( timer ) * 800;
//        camera.position.z = Math.sin( timer ) * 800;
            webglRender.render(scene, camera)
//           stats.update()
        }

        function startThree() {
            initStata()
            initCamera()
            initScene()
            addLight()
            addObj()
//           addText()
            initThree()
            animate()
        }

        startThree()
        var axes = new THREE.AxisHelper(2000);
        scene.add(axes);
    }
    var chartDom;
function initChart() {
    var chartDom = document.createElement("div");
    chartDom.style.width = "200px"
    chartDom.style.height = "200px"
    var chart = echarts.init(chartDom);
   var option = {
        title: {
            text: '堆叠区域图'
        },
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'邮件营销',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
                name:'联盟广告',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'视频广告',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data:[150, 232, 201, 154, 190, 330, 410]
            },
            {
                name:'直接访问',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data:[320, 332, 301, 334, 390, 330, 320]
            },
            {
                name:'搜索引擎',
                type:'line',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                areaStyle: {normal: {}},
                data:[820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    };
    chart.setOption(option);
    console.log(chartDom.childNodes[0].childNodes)
    return chartDom;
}
    chartDom = initChart()
    if (window.goSamples) goSamples()
    var $ = go.GraphObject.make;

    var dragContent = $(go.Diagram, "dragContent", {
        initialContentAlignment: go.Spot.Center,
        "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,//缩放
        "clickCreatingTool.archetypeNodeData": {text: "new node"},//通过点击创建一个节点
        allowDrop: true,  // must be true to accept drops from the Palette
//        "LinkDrawn": showLinkLabel,  // this DiagramEvent listener is defined below
//        "LinkRelinked": showLinkLabel,
        "animationManager.duration": 800, // slightly longer than default (600ms) animation
        "undoManager.isEnabled": true  // enable undo & redo
//        "animationManager.duration": 800,
//        "undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
//        allowDrop: true,
//        "grid.visible": true,//绘制网格
//        initialContentAlignment: go.Spot.Center,//图形在居中的位置开始绘制
    })

    dragContent.nodeTemplateMap.add("chart",
        $(go.Node, "Vertical", nodeStyle(),
            $(go.Picture,
                {element: chartDom.childNodes[0].childNodes[0], width: 200, height: 200}),
            $(go.TextBlock, "WebGL node")
        ));
    function nodeStyle() {
        return [
            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify)

        ]
    }
    dragContent.nodeTemplateMap.add("webgl",
        $(go.Node, "Vertical", nodeStyle(),
            {resizable: true},
            $(go.Picture,
                {element: chartDom.childNodes[0].childNodes[0], width: 200, height: 200,imageStretch:go.GraphObject.Fill  }),
            $(go.TextBlock, "WebGL node")
        ));

    function createPoint(name, spot, outPut, inPut) {
        return $(go.Shape, "Circle", {
            fill: "blue",//填充颜色
            stroke: null,
            desiredSize: new go.Size(10, 10),//设定尺寸
            alignment: spot,//指定点的位置  go.Spot.top/go.Spot.left/go.Spot.bottom/go.Spot.right
            alignmentFocus: spot,//焦点对应的位置
            portId: name,
            fromSpot: spot, toSpot: spot,//from 从哪里来的 to  到哪里去的
            fromLinkable: outPut, toLinkable: inPut,//from 点 是否可以连  to  点 是否可连
            cursor: 'pointer'//手势
        })
    }
    //nodeTemplateMap  添加的时候需要设定key  也就是 model里面的category 的值

    var dragNav = $(go.Palette, "dragNav", {
        "animationManager.duration": 800,
        nodeTemplateMap: dragContent.nodeTemplateMap,
        initialScale: 0.5,//,缩小
//        model: new go.GraphLinksModel()
    })


    var nodes = [
        { category: "webgl"},
        { category: "chart"}
    ];
    dragNav.model.nodeDataArray = nodes;






</script>
</body>
</html>